<?php
if (!defined('IN_XLP')) {
    exit('Access Denied');
}
$Document = array(
    'pageid' => 'index-index', //页面标示
    'pagename' => '', //当前页面名称
    'mycss' => array('index/common','index/style','index/trend'), //加载的css样式表
    'myjs' => array('index/jquery.min','index/d3.v5.min'), //加载的js脚本
    'footerjs'=>array(),
    'head'=>true//是否加载头部文件
);
include getTpl('header', 'public');
?>
<body>
<?php include getTpl('small_top' , 'public'); ?>
<?php include getTpl('top' , 'public'); ?>
<div class="container">
    <div class="trend-head">
      <div class="label">
        <div class="icon">
          <svg>
            <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#trend" /></svg>
        </div>
        <div class="title">
          <p><?php echo $game['name']; ?></p>
          <p>每一元游戏币比例趋势图</p>
        </div>
      </div>

      <div class="search-wrap">
        <div class="select-type">
          <span>选择筛选条件</span>
          <svg class="arrow">
            <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#arrow-down" /></svg>
          <ul class="st-dropdown">
            <li>按年查看</li>
            <li>按月查看</li>
            <li>按日查看</li>
          </ul>
        </div>
        <div class="date-wrap">
          <span>选择日期</span>
          <div class="picker">
            <div class="year-wrap">
              <div class="head">
                <div class="text">年</div>
              </div>
              <ul class="years"></ul>
            </div>
            <div class="month-wrap">
              <div class="head">
                <div class="text-wrap">
                  <div class="text">月</div>
                  <svg>
                    <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#triangle" /></svg>
                </div>
                <div class="ctrl">
                  <div class="arrow-wrap yb">
                    <svg>
                      <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#arrow-down" /></svg>
                  </div>
                  <div class="arrow-wrap yf">
                    <svg>
                      <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#arrow-down" /></svg>
                  </div>
                </div>
              </div>
              <ul class="months">
                <li><span>1月</span></li>
                <li><span>2月</span></li>
                <li><span>3月</span></li>
                <li><span>4月</span></li>
                <li><span>5月</span></li>
                <li><span>6月</span></li>
                <li><span>7月</span></li>
                <li><span>8月</span></li>
                <li><span>9月</span></li>
                <li><span>10月</span></li>
                <li><span>11月</span></li>
                <li><span>12月</span></li>
              </ul>
            </div>
            <div class="day-wrap">
              <div class="head">
                <div class="text-wrap">
                  <div class="text">日</div>
                  <svg>
                    <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#triangle" /></svg>
                </div>
                <div class="ctrl">
                  <div class="arrow-wrap mb">
                    <svg>
                      <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#arrow-down" /></svg>
                  </div>
                  <div class="arrow-wrap mf">
                    <svg>
                      <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#arrow-down" /></svg>
                  </div>
                </div>
              </div>
              <ul class="days"></ul>
            </div>
          </div>
        </div>
        <button class="search-btn">搜索</button>
      </div>

      <!-- 提示 -->
      <div class="search-notice"></div>
    </div>

    <!-- 趋势图 -->
    <div class="trend-wrap">
      <div class="trend-toggle">
        <svg>
          <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#trend" /></svg>
        收起趋势图
      </div>
      <svg width="1256" height="400" class="trend-svg">
        <filter id="dropShadow">
          <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
          <feOffset dx="0" dy="1" />
          <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <defs>
          <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="rgba(255,255,255,0.7)" />
            <stop offset="60%" stop-color="#46a2fd" />
            <stop offset="70%" stop-color="#3399fe" />
            <stop offset="100%" stop-color="#3399fe" />
          </linearGradient>
        </defs>

        <rect class="rect-bg" x="452" y="0" width="176" height="360" fill="#efeff4"></rect>

        <g class="x-scale"></g>
        <g class="y-scale"></g>
        <g class="path-wrap"></g>

        <line x1="100" y1="0" x2="100" y2="360" stroke="#d7d7d7" stroke-wdith="1" />
        <line x1="20" y1="360" x2="1244" y2="360" stroke="#d7d7d7" stroke-wdith="1" />
        <text class="date-type" x="100" y="386" text-anchor="middle" fill="#999">日</text>
      </svg>

      <div class="ripple-wrap">
        <div class="outer">
          <div class="middle">
            <div class="inner"></div>
          </div>
        </div>
      </div>

      <div class="tooltip">
        <div class="caret"></div>
        <p class="label"><span></span>金价比</p>
        <p class="ratio">1元=58.11万金</p>
      </div>

    </div>
    <!-- end of 趋势图 -->

    <!-- 趋势表格 -->
    <div class="trend-table">
      <div class="trend-toggle">
        <svg>
          <use xlink:href="<?php echo IMG_PATH ?>index/icons/icons.svg#trend" /></svg>
        开启趋势图
      </div>

      <ul class="tt-head">
        <li>日期</li>
        <li>区服</li>
        <li>类型</li>
        <li>比例</li>
      </ul>
    </div>
</div>
<?php include getTpl('footer', 'public');  ?>
<script src="<?php echo JS_PATH ?>index/main.bundle.js"></script>
<script>
    var trader = "<?php echo $cr ?>";
    var areas  = '<?php echo json_encode(array($ar)) ?>';
    getData();
</script>
<script>
    //物品类型
    function getGameType(obj) {
        $(obj).addClass('on').siblings(".p_one").removeClass('on');
        $("#gameServer").text($(obj).attr('data-name'));
        $("input[name=ar]").val($(obj).attr('data-abri'));
        if(mode == 'records' && $('.hq').hasClass('on')){ 
            areas = $(obj).attr('data-abri');
            $('.cancel').click();
            getData();
        }else{
            //加入表单
            $(obj).parents(".game_n ").removeClass("active").next(".game_n").addClass("active");
            $(".gameBox").get(0).className = 'gameBox';
            $(".gameBox").addClass("wr4");
        }
    }

    function chooseIdent(obj) {
        $(obj).addClass('on').siblings(".p_one").removeClass('on');
        $("#ident").text($(obj).attr('data-name'));
        //加入表单
        $("input[name=cr]").val($(obj).attr('data-abri'));
        // $(obj).parents(".game_n").removeClass("active");
        // $(".gameBox").removeClass("wr5");

        if(mode == 'records' && $('.hq').hasClass('on')){ 
            trader = $(obj).attr('data-abri');
            $('.cancel').click();
            getData();
        }else{
            var g = $("input[name=gm]").val();
            var a = $("input[name=ar]").val();
            var t = $("input[name=ty]").val();
            var c = $("input[name=cr]").val();
            if(!g || !a || !t || !c) {
                return false;
            }
            $("#postForm").submit();
        }
    }
</script>
</body>
</html>    